<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>智能分镜</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }
        /* 遮罩层 */ .overlay { display: none; position: fixed; top: 0; left: 0;
        width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1;
        } /* 弹窗样式 */ .modal { display: none; position: fixed; top: 50%; left: 50%;
        transform: translate(-50%, -50%); background: #fff; padding: 20px; box-shadow:
        0px 4px 6px rgba(0, 0, 0, 0.1); z-index: 2; width: 300px; text-align: center;
        } /* 关闭按钮 */ .close-btn { background-color: #f44336; color: white; border:
        none; padding: 5px 10px; cursor: pointer; border-radius: 5px; } .close-btn:hover
        { background-color: #d32f2f; }

        body {
            padding: 20px;
            background: #fff;
        }

        .container {
            width: 100%;
            margin: 0 auto;
            display: flex;
            gap: 20px;
        }

        .left-panel {
            width: 50%;
            padding-right: 10px;
        }

        .input-group {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            gap: 10px;
        }
        .table th {
            background: #f5f5f5;
            text-align: left;
            padding: 12px;
            font-weight: normal;
        }
        /* 调整复选框组的布局 */
        .checkbox-group label {
            display: flex;
            align-items: center;
            gap: 5px;
        }
    </style>
    <script src="qrc:///qtwebchannel/qwebchannel.js"></script>
</head>
<body>
    <div class="container">

        <div id="overlay" class="overlay" onclick="closeModal()"></div>

        <div id="modal" class="modal">
            <p id="message">消息弹窗</p>
            <!-- TODO: 调整消息弹窗样式 -->
            <button class="close-btn" onclick="closeModal()">关闭</button>
        </div>

        <!-- Left Panel -->
        <div class="left-panel">
            <div class="input-group">
                <label>素材目录:</label>
                <label for="clipInput"></label><input type="text" id="clipInput" placeholder="请选择视频文件/文件夹"
                                                      onclick="clipInput('clipInput')" value="">
                <span id="clipInputCount">视频数量: 0</span>
            </div>
            <div class="input-group">
                <label>导出目录:</label>
                <label for="clipOutput"></label><input type="text" onclick="chooseFolder('clipOutput')" id="clipOutput"
                                                       placeholder="请选择文件夹" value="">
            </div>

            <div class="button-group">
                <button class="btn btn-primary" id="open-file-btn" onclick="openFile('clipOutput')">打开文件夹</button>
                <button class="btn btn-primary" onclick="start_clip()">开始分镜任务</button>
                <button class="btn btn-primary" id="stop-split" onclick="stop_worker()">停止任务</button>
            </div>
            <div class="status-bar">
                已选择<span class="red-text" id="select_video_count_total">0</span>个视频
                总时长: <span id="select_video_duration_total">0.00</span>分钟
                <input type="checkbox" id="selectAll" class="selectAll" onchange="selectAll()">
                <label for="selectAll">选择全部</label>
                <div class="file-list">
                    <table>
                        <thead>
                        <tr>
                            <td>选择</td>
                            <th>序号</th>
                            <th>文件名</th>
                            <th>时长</th>
                            <th>大小</th>
                        </tr>
                        </thead>
                        <tbody id="shotListBody">
                        <!-- 动态生成的行将被插入这里 -->
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="options-group">
                <label>分镜模式:</label>
                <div class="radio-group" id="split-mode-group">
                    <label><input type="radio" name="split_mode" value="scene" checked> 按场景智能分镜</label>
                    <label><input type="radio" name="split_mode" value="duration"> 按固定分镜时长分镜</label>
                    <label><input type="radio" name="split_mode" value="count"> 按分镜数量分镜</label>
                    <label><input type="radio" name="split_mode" value="voice"> 按口播分镜</label>
                    <label><input type="radio" name="split_mode" value="emotion"> AI精准转场分镜</label>
                </div>
            </div>

            <div class="options-group">
                <label>参数设置:</label>
                <div id="param-setting"></div>
            </div>
            <div class="options-group">
                <label>文件输出:</label>
                <div class="radio-group">
                    <label><input type="radio" name="split_save_mode" value=true checked> 分目录保存 </label>
                    <label><input type="radio" name="split_save_mode" value=false> 同目录保存 </label>
                </div>
            </div>
        </div>
    </div>

<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function () {
        let item = {
            paramRange: 0.5,
            durationInput: 5,
            countInput: 5,
            normal: {},
            advanced: {},
            pro: {},
            auto: {}
        };
        let items = [];

        new QWebChannel(parent.qt.webChannelTransport, function (channel) {
            Bridge = channel.objects.Bridge;

            Bridge.started.connect(function (msg) {
                showModal(msg)
            });
            Bridge.finished.connect(function (msg) {
                showModal(msg)
            });
            Bridge.failed.connect(function (msg) {
                showModal(msg)
            });

            /*  文件操作方法  */
            // 选择文件夹
            window.chooseFolder = function (eid) {
                Bridge.choose_folder(eid);
            };

            // 打开文件或者文件夹
            window.openFile = function (eid) {
                let path = document.getElementById(eid).value;
                if (path) {
                    Bridge.open_file(path);
                }
            };

            // 选择的文件夹信号槽
            Bridge.select_folder_result.connect(function (eid, path) {
                document.getElementById(eid).value = path;
            });
            // 返回智能分镜目录
            Bridge.select_files_result.connect(function (eid, files, count) {
                // 渲染基础合成分镜列表
                const tbody = document.getElementById('shotListBody');
                if (!tbody) {
                    return;
                }
                let files_list = [];
                items = [];
                for (let file_item of files) {
                    files_list.push(`
                        <tr data-id="">
                            <td><label>
                                <input type="checkbox" class="row-check" value="${file_item.file}">
                            </label></td>
                            <td>${file_item.id}</td>
                            <td>${file_item.file}</td>
                            <td>${file_item.duration}秒</td>
                            <td>${file_item.size}</td>
                        </tr>
                    `);
                    file_item.status = false;
                    items.push(file_item);
                }
                tbody.innerHTML = files_list.join('');
                // 更新选择的文件数量
                document.getElementById("clipInputCount").innerText = "视频数量: " + count;
                bindEventListeners();
            });
            window.clipInput = function () {
                Bridge.choose_folder_and_read_video_files("clipInput")
            };


            /*  操作逻辑  */
            // 开始分镜
            window.start_clip = function () {
                const table = document.getElementById("shotListBody");
                const rows = table.querySelectorAll("tbody tr");
                const selectedValues = [];

                rows.forEach(row => {
                    const checkbox = row.querySelector("td:nth-child(1) input[type='checkbox']");
                    if (checkbox && checkbox.checked) {
                        selectedValues.push(checkbox.value);
                    }
                });
                if (selectedValues.length === 0) {
                    showModal("请选择分镜")
                    return;
                }

                let output_path = document.getElementById("clipOutput").value,
                    selected = document.querySelector('input[name="split_mode"]:checked').value;
                if (!output_path) {
                    showModal("请选择输出目录")
                    return;
                }
                clip_path = JSON.stringify(selectedValues)
                if (selected === "scene") {
                    Bridge.start_clip("scene", clip_path, output_path, item.paramRange)
                } else if (selected === "duration") {
                    Bridge.start_clip("duration", clip_path, output_path, item.durationInput)
                } else if (selected === "count") {
                    Bridge.start_clip("count", clip_path, output_path, item.countInput)
                } else if (selected === "voice") {
                    Bridge.start_clip("voice", clip_path, output_path, "")
                } else if (selected === "emotion") {
                    showModal("该功能正在开发中，敬请期待！")
                }
            };

            // 停止生成
            window.stop_worker = function () {
                Bridge.stop()
            };


        });
        // 开始任务
        let selected_video_count_elm = document.getElementById("select_video_count_total"),
            selected_video_duration_elm = document.getElementById("select_video_duration_total");


        window.showModal = function (message) {
            document.getElementById("message").innerText = message;
            document.getElementById("overlay").style.display = "block";
            document.getElementById("modal").style.display = "block";
        };

        window.closeModal = function () {
            document.getElementById("overlay").style.display = "none";
            document.getElementById("modal").style.display = "none";
        };



        // 选择全部
        window.selectAll = function () {
            let selectAllCheckbox = document.getElementById("selectAll");
            let rowCheckboxes = document.querySelectorAll(".row-check");
            rowCheckboxes.forEach(checkbox => {
                checkbox.checked = selectAllCheckbox.checked;
            });
            if (selectAllCheckbox.checked) {
                selected_video_count_elm.innerText = rowCheckboxes.length;
                // 从items中计算总时长
                let total_duration = 0;
                for (let item of items) {
                    total_duration += item.duration;
                    item.status = true;
                }
                selected_video_duration_elm.innerText = (total_duration / 60).toFixed(2);
            } else {
                for (let item of items) {
                    item.status = false;
                }
                selected_video_count_elm.innerText = 0;
                selected_video_duration_elm.innerText = 0;
            }
        };

        window.update_total = function () {
            let total_duration = 0;
            let total_count = 0;
            for (let item of items) {
                if (item.status) {
                    total_duration += item.duration;
                    total_count++;
                }
            }
            selected_video_count_elm.innerText = total_count;
            selected_video_duration_elm.innerText = (total_duration / 60).toFixed(2);
        };

        // 监听单个视频选择
        window.bindEventListeners = function () {
            document.querySelectorAll(".row-check").forEach(checkbox => {
                checkbox.addEventListener("change", function (event) {
                    if (checkbox.checked) {
                        for (let item of items) {
                            if (item.file === event.target.value) {
                                item.status = true;
                            }
                        }
                    } else {
                        for (let item of items) {
                            if (item.file === event.target.value) {
                                item.status = false;
                            }
                        }
                    }
                    update_total();
                });
            });
        };

        window.renderParamSetting = function (mode) {
            const container = document.getElementById('param-setting');
            container.innerHTML = ''; // 清空之前的内容

            if (mode === 'scene') {
                // 滑动条参数（0.2 ~ 0.9）
                const sliderDiv = document.createElement('div');
                sliderDiv.className = 'slider-group';
                sliderDiv.innerHTML = `
                                <input type="range" id="paramRange" min="0.2" max="0.9" step="0.01" value="${item.paramRange}">
                                <span id="paramValue">${item.paramRange}</span>
                            `;
                container.appendChild(sliderDiv);
                document.getElementById("paramRange").addEventListener("input", function () {
                    document.getElementById('paramValue').textContent = this.value;
                    item.paramRange = this.value;
                });
            } else if (mode === 'duration') {
                // 输入框，单位：秒
                container.innerHTML = `
                                <input type="number" id="durationInput" step="1" min="1" value="${item.durationInput}"> <span>秒</span>
                            `;
                document.getElementById("durationInput").addEventListener("input", function () {
                    item.durationInput = this.value;
                });
            } else if (mode === 'count') {
                // 输入框，单位：个分镜
                container.innerHTML = `
                                <input type="number" id="countInput" min="1" step="1" value="${item.countInput}"> <span>个分镜</span>
                            `;
                document.getElementById("countInput").addEventListener("input", function () {
                    item.countInput = this.value;
                });
            } else {
                container.innerHTML = `<span style="color: #888;">该模式不需要参数设置</span>`;
            }
        };
        renderParamSetting('scene');
        // 监听单选框变化
        document.querySelectorAll('input[name="split_mode"]').forEach(radio => {
            radio.addEventListener('change', function () {
                renderParamSetting(this.value);
            });
        });
    });
</script>
</body>
</html>